<template>
    <div style="width:92%; margin-left: 4%; margin-top: 3%; background: #ffff;border-radius: 5%;">
        <div class="flex-content">
            <nut-cell-group>
                <nut-cell :center="true" :desc="address" is-link @click="chooseLocation()">
                    <template v-slot:icon>
                        <image style="width:20px;height: 20px;"
                            src="https://cxj.szzkba.cn/upload/i/2024/06/23/165808.png">
                        </image>
                    </template>
                    <template v-slot:link>
                        <image style="width:20px;height: 20px;"
                            src="https://pic.imgdb.cn/item/64819f271ddac507cccac341.png">
                        </image>
                    </template>
                </nut-cell>
                <nut-cell :center="true" title="友伴" :desc="userDetailsInfo.user_Nickname" is-link>
                    <template v-slot:icon>
                        <image style="width:20px;height: 20px;"
                            src="https://cxj.szzkba.cn/upload/i/2024/06/23/165804.png">
                        </image>
                    </template>
                    <template v-slot:link>
                        <!-- <image style="width:30px;height: 30px;border-radius: 50%;overflow:hidden;margin-left:5%;"
                            :src="userBaseInfo.imageUrl">
                        </image> -->
                    </template>
                </nut-cell>
                <nut-cell :center="true" title="出行方式" desc="滴滴出行">
                    <template v-slot:icon>
                        <image style="width:20px;height: 20px;"
                            src="https://cxj.szzkba.cn/upload/i/2024/06/23/161615.png">
                        </image>
                    </template>
                    <!-- <template v-slot:link>
                        <image style="width:20px;height: 20px;"
                            src="https://pic.imgdb.cn/item/64819f271ddac507cccac341.png">
                        </image>
                    </template> -->
                </nut-cell>
                <div class="content">
                    <span style="color: #999999">全程共</span>
                    <span style="color:lightgreen">{{ distance }}km</span>
                    <span style="color:#999999">,出租出行收取来回车费，</span>
                    <span style="color:lightgreen">起步10.00元</span>
                    <span style="color: #999999">，超出3公里，按</span>
                    <span style="color:lightgreen">每公里3.00元</span>
                    <span style="color: #999999">计算车费</span>
                </div>
                <nut-cell :center="true" title="服务时间" :desc="selTime + '到达'" is-link @click="showSelectTime = true">
                    <template v-slot:icon>
                        <image style="width:20px;height: 20px;"
                            src="https://cxj.szzkba.cn/upload/i/2024/06/23/165416.png">
                        </image>
                    </template>
                    <template v-slot:link>
                        <image style="width:20px;height: 20px;"
                            src="https://pic.imgdb.cn/item/64819f271ddac507cccac341.png">
                        </image>
                    </template>
                </nut-cell>
            </nut-cell-group>
            <nut-popup v-model:visible="showSelectTime" position="bottom" :style="{ height: 'auto' }">
                <Search-Box1 />
            </nut-popup>
        </div>
    </div>
    <div style="width:92%; margin-left: 4%; margin-top: 3%; background: #ffff;border-radius: 5%;">
        <!-- <div class="flex-content"> -->
        <div
            style="font-weight: bold;font-size: 14px;margin-left:4%;margin-right:4%;padding-top: 3%;border-bottom: 0.5px solid #e6e6e6;">
            订单明细</div>
        <div style="margin:5%">
            <nut-row>
                <nut-col :span="7">
                    <image style="width:80px;height: 80px;border-radius: 5%;overflow: hidden;"
                        src="https://cxj.szzkba.cn/upload/i/2024/06/04/182133.jpeg">
                    </image>
                </nut-col>
                <nut-col :span="17">
                    <div style="font-size:14px;font-weight:bold;">{{ projectList.project_Name }}</div>
                    <div style="font-size:14px;color:#999999;">服务时长：<span style="color:black">{{ preSerTime
                            }}分钟</span></div>
                    <div style="display:inline;">
                        <div style="font-size:16px;margin-top:5%;color:red;font-weight:bold;float:left">¥&nbsp;{{
                    projectList.mini_Amount }}</div>
                        <div style="float:right;margin-top: 6%"><nut-input-number @change="changeNum"
                                v-model="projectList.mini_Count" :min="projectList.mini_Count" /></div>
                    </div>
                </nut-col>
            </nut-row>
            <nut-row>
                <nut-col :span="20"><span style="font-size:14px;margin-left:auto;">项目金额</span></nut-col>
                <nut-col :span="4"><span style="font-size:14px;color:red;font-weight:bold;float:right;">¥&nbsp;{{
                    projectMoney }}</span></nut-col>
            </nut-row>
            <nut-row>
                <nut-col :span="20"><span style="font-size:14px;margin-left:auto;">出行费用</span></nut-col>
                <nut-col :span="4"><span style="font-size:14px;color:red;font-weight:bold;float:right;">¥&nbsp;{{
                    travelMoney
                }}</span></nut-col>
            </nut-row>
            <div
                style="width:98%;font-size: 12px;margin-top:2%; margin-bottom: 2%;background:#e6e6e6;padding:2%;border-radius: 5px;">
                <span style="color: #999999">若预约凌晨时间，友伴上门难度增大，出行费用将上调</span>
            </div>
            <nut-row>
                <nut-col :span="20"><span style="font-size:16px;font-weight:bold;margin-left:auto;">总计</span></nut-col>
                <nut-col :span="4"><span style="font-size:16px;color:red;font-weight:bold;float:right;">¥&nbsp;{{
                    travelMoney + projectMoney }}</span></nut-col>
            </nut-row>
        </div>
    </div>
    <div style="width:92%; margin-left: 4%; margin-top: 3%; background: #ffff;border-radius: 5%;">
        <!-- <div class="flex-content"> -->
        <div style="font-weight: bold;font-size: 14px;margin-left:4%;margin-right:4%;padding-top: 3%;" class="flex-a">
            <image style="width:20px;height: 20px;vertical-align: middle"
                src="https://cxj.szzkba.cn/upload/i/2024/06/23/185907.png">
            </image>
            <span style="vertical-align: middle">&nbsp;专业正规</span>
        </div>
        <div style="font-size: 12px;margin-left:4%;margin-right:4%;padding-top: 3%;color:#999999">
            提供正规、专业的友伴服务，平台友伴均具备专业素质，可放心预约点单</div>
        <div style="font-weight: bold;font-size: 14px;margin-left:4%;margin-right:4%;padding-top: 3%;" class="flex-a">
            <image style="width:20px;height: 20px;vertical-align: middle"
                src="https://cxj.szzkba.cn/upload/i/2024/06/23/184956_2.png">
            </image>
            <span style="vertical-align: middle">&nbsp;安心服务</span>
        </div>
        <div style="font-size: 12px;margin-left:4%;margin-right:4%;padding-top: 3%;color:#999999">
            友伴经受专业培训，禁止小费行为</div>
        <div style="font-weight: bold;font-size: 14px;margin-left:4%;margin-right:4%;padding-top: 3%;" class="flex-a">
            <image style="width:20px;height: 20px;vertical-align: middle"
                src="https://cxj.szzkba.cn/upload/i/2024/06/23/184956.png">
            </image>
            <span style="vertical-align: middle">&nbsp;号码保护</span>
        </div>
        <div style="font-size: 12px;margin-left:4%;margin-right:4%;padding-top: 3%;color:#999999">
            为了保护您的隐私安全，已对友伴隐藏您的真实手机号,为了保障服务质量，开启号码保护的订单通话可能会被录音</div>

    </div>
    <div style="background: #ffff;border-radius: 5%;margin-top:5%;">
        <div style="width:92%;padding:4%">
            <nut-button block color="#2B35FA" @click="submit">提交订单</nut-button>
        </div>
    </div>
    <!-- <ProjDetails /> -->
</template>
<script lang="ts">
import SearchBox1 from './SearchBox1.vue';
import mitt from "../../../utils/mitt";
import { ref, reactive, onMounted, watchEffect, toRefs } from 'vue';
import { getUserDetailsByID, getPageSettingList, createOrder, pay } from '../../../../api/index'
import Taro from '@tarojs/taro'
const value = ref('c1')
const selectDate = new Date()
const min = new Date(2024, 1, 1, 0, 0)
const max = new Date(2027, 12, 31, 23, 59)
const list = ref([
    {
        title: '提供的项目',
        // icon: 'https://cxj.szzkba.cn/upload/i/2024/06/04/180234.png',
        paneKey: 'c1'
    },
    {
        title: 'Ta的动态',
        // icon: 'https://cxj.szzkba.cn/upload/i/2024/06/04/180443.png',
        paneKey: 'c2'
    },
    {
        title: '客户评价',
        // icon: 'https://cxj.szzkba.cn/upload/i/2024/06/04/180153.png',
        paneKey: 'c3'
    }
])
const visible = ref(false)
export default {
    components: {
        'Search-Box1': SearchBox1,
    },
    setup() {
        const state = reactive({
            distance: '0',
            projectMoney: 0,
            travelMoney: 0,
            showPreview: false,
            imgData: [
                {
                    src: 'https://cxj.szzkba.cn/upload/i/2024/06/05/163233.jpg'
                },
                {
                    src: 'https://cxj.szzkba.cn/upload/i/2024/06/05/163233.jpeg'
                },
                {
                    src: 'https://cxj.szzkba.cn/upload/i/2024/06/04/182133.jpeg'
                },
            ],
            imgUrl:
                'https://cxj.szzkba.cn/upload/i/2024/06/04/182133.jpeg',
            title: '礼仪模特',
            userDetailsInfo: [],
            serviceNum: 1,
            userBaseInfo: [],
            userServiceInfo: [],
            preSerTime: 60,
            projectList: [],
            address: '请选择地址',
            showSelectTime: false,
            showDays: [] as any,
            user: {},
            time: '',
            selTime: '',
            latitude: '',
            longitude: '',
        });
        onMounted(() => {
            Taro.getStorage({
                key: 'user',
                success: function (res) {
                    state.user = res.data ? res.data : {}
                    console.log("44444444444444")
                    console.log(state.user)
                }
            })
            Taro.setNavigationBarTitle({
                title: '提交订单'
            })
            getUserDetails()
            futureDays()
            mitt.on("time", (val) => {
                state.time = val
            })
            mitt.on("selTime", (val) => {
                state.selTime = val
            })
        });
        const formatter = (type, option) => {
            switch (type) {
                case 'year':
                    option.text += '年'
                    break
                case 'month':
                    option.text += '月'
                    break
                case 'day':
                    option.text += '日'
                    break
                case 'hour':
                    option.text += '时'
                    break
                case 'minute':
                    option.text += '分'
                    break
                default:
                    option.text += ''
            }
            return option
        }
        const updateMessage = () => {
            state.distance1 = '22222222222'
        }

        const submit = () => {
            let params = {
                user_ID: state.user.uuid,
                service_Name: state.projectList.project_Name,
                service_Time: state.time,
                service_Addr: state.address,
                service_Lat: state.latitude + '',
                service_Lng: state.longitude + '',
                service_Amount: state.projectMoney,
                taxi_Amount: state.travelMoney,
                server_User_Id: state.userDetailsInfo.user_ID,
                server_Id: state.projectList.ID + ''
            }
            if (state.address == '请选择地址') {
                Taro.showToast({
                    title: '请选择地址',
                    icon: 'error',
                    duration: 2000
                })
            } else if (state.selTime == '') {
                Taro.showToast({
                    title: '请选择服务时间',
                    icon: 'error',
                    duration: 2000
                })
            } else {
                createOrder(params).then(res => {
                    if (res.code == 0) {
                        pay({
                            order_No: res.data,
                            openId: state.user.openId,
                            title: '支付调用',
                            remark: ''
                        }).then(res => {
                            if (res.code == 0) {
                                Taro.requestPayment({
                                    timeStamp: res.data.timeStamp,
                                    nonceStr: res.data.nonceStr,
                                    package: res.data.package,
                                    signType: res.data.signType,
                                    paySign: res.data.paySign,
                                    success: function (res) {
                                        // setTimeout(() => {
                                        //     jumpTo('/pages/index/index')
                                        // }, 500)
                                    },
                                })
                            }
                        })
                    }
                })
            }
        }
        const jumpTo = (path) => {
            Taro.navigateTo({ url: path })
        }
        const onCancel = () => {
            console.log('event cancel')
        }
        const onOk = () => {
            jumpTo('/packageA/pages/order/orderDetails')
            console.log('event ok')
        }
        const preClick = () => {
            visible.value = true
        }
        const chooseLocation = () => {
            Taro.chooseLocation({
                success: function (res) {
                    console.log(res)
                    state.address = res.address

                    const latitude = res.latitude
                    const longitude = res.longitude
                    state.latitude = res.latitude
                    state.longitude = res.longitude
                    const earthRadius = 6371000;

                    // 转换为弧度
                    const lat1Rad = latitude * (Math.PI / 180);
                    const lat2Rad = Number(state.userDetailsInfo.lat) * (Math.PI / 180);
                    const lon1Rad = longitude * (Math.PI / 180);
                    const lon2Rad = Number(state.userDetailsInfo.lng) * (Math.PI / 180);

                    // Haversine公式
                    const diffLat = lat2Rad - lat1Rad;
                    const diffLon = lon2Rad - lon1Rad;
                    const a = Math.sin(diffLat / 2) * Math.sin(diffLat / 2) +
                        Math.cos(lat1Rad) * Math.cos(lat2Rad) *
                        Math.sin(diffLon / 2) * Math.sin(diffLon / 2);
                    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
                    const distance = earthRadius * c;
                    const dis = Number((Number(distance) / 1000).toFixed(3))
                    if (dis >= 30) {
                        state.address = '请选择地址'
                        Taro.showToast({
                            title: '超出服务范围',
                            icon: 'error',
                            duration: 2000
                        })
                    } else {
                        state.distance = dis + ''
                        if (Number(state.distance) <= 3) {
                            state.travelMoney = 10
                        } else {
                            state.travelMoney = 10 + (Math.ceil(Number(state.distance)) - 3) * 3
                        }
                    }
                },
                fail: function (res) {
                    console.log(res, '获取地址失败');
                },
            })
        }
        const getUserDetails = () => {
            const UserID = Taro.getCurrentInstance().router.params.userID
            const ProjectID = Taro.getCurrentInstance().router.params.projectID
            console.log("UserID : " + UserID)
            console.log("ProjectID : " + ProjectID)
            getUserDetailsByID(UserID).then(res => {
                if (res.code == 0) {
                    res.data.reuserDetails.user_Enterts = res.data.reuserDetails.user_Enterts.split(",")
                    res.data.reuserDetails.user_Services = res.data.reuserDetails.user_Services.split(",")
                    res.data.reuserDetails.user_Leisures = res.data.reuserDetails.user_Leisures.split(",")
                    res.data.reuserDetails.user_Balls = res.data.reuserDetails.user_Balls.split(",")
                    state.userDetailsInfo = res.data.reuserDetails
                    state.userBaseInfo = res.data.reuserDetails.Users
                    state.userServiceInfo = res.data.reuserDetails.UserOnService
                    console.log(state.userBaseInfo)
                    console.log(state.userDetailsInfo)
                }
            })
            getPageSettingList().then(resd => {
                if (resd.code == 0) {
                    let proList = resd.data.list
                    console.log(proList)
                    proList = proList.filter((item, index) => item.ID == ProjectID)
                    state.imgUrl = proList[0].remark
                    state.projectName = proList[0].project_Name
                    state.miniAmount = proList[0].mini_Amount
                    state.projectList = proList[0]
                    state.projectMoney = Number(proList[0].mini_Amount) * Number(state.projectList.mini_Count)
                }
            })
        };
        const futureDays = () => {
            for (let i = 0; i < 7; i++) {
                let date = new Date();
                date.setDate(new Date().getDate() + i);
                let weekday = new Date(date).toLocaleDateString(undefined, { weekday: 'short' });
                // days.push({
                //   date: date.toLocaleDateString(),
                //   weekday: weekday
                // });
                state.showDays.push({
                    date: date.toLocaleDateString('zh-cn', { month: 'long', day: 'numeric' }),
                    weekday: weekday
                })
            }
        }
        const changeNum = (e) => {
            console.log(e)
            state.projectMoney = Number(e) * Number(state.projectList.mini_Amount)
        }
        return { ...toRefs(state), changeNum, formatter, submit, jumpTo, onCancel, onOk, preClick, chooseLocation, getUserDetails, futureDays, updateMessage };
    }
};

</script>
<style lang="scss">
.avatar {
    vertical-align: middle
}

.content {
    width: 86%;
    font-size: 12px;
    margin-left: 7%;
    margin-top: 2%;
    margin-bottom: 2%;
    background: #e6e6e6;
    padding: 2%;
    border-radius: 5px;

    span {
        display: inline-block;
        font-size: 26rpx;
    }
}

.avatarButton {
    display: flex;
    align-items: center;
    margin-left: 20%;
    // margin-top: 5%;
}

.avatarImage {
    margin-left: 5%;
    width: 80px;
    height: 80px;
    overflow: hidden;
    border-radius: 50%;
}

.nut-video-player {
    margin-left: 5%;
    width: 620px;
}

.imageContainer {
    display: flex;
    /* 启用Flexbox布局 */
    flex-wrap: wrap;
    /* 允许元素在必要时换行 */
}

.imageBox {
    flex: 1;
    /* 每个.box平均分配空间 */
    // border: 1px solid #000;
    /* 边框，以便于观察 */
    // padding: 10px;
    /* 内边距 */
    box-sizing: border-box;
    /* 防止内边距和边框增加总尺寸 */
    margin-left: 5%;
    /* 外边距 */

    flex-basis: 100%;
    /* 每个div默认占满一行 */
}

@media screen and (min-width: 620px) {
    .imageBox {
        flex-basis: calc(100% / 3);
        /* 屏幕宽度大于600px时，每个div平分容器宽度的三分之一 */
    }
}

.custom-tab-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1.8%;
    // margin-left: 4%;
}

.custom-title {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28px;
    color: rgb(66, 66, 66);
    cursor: pointer;
    // margin-top: 40%;
}

.custom-title.active {
    color: black;
    font-weight: bold;
    margin-bottom: 10%;
    background: rgb(255, 255, 255);
}

.nut-tabs__titles .nut-tabs__list {
    background: transparent;
}

.card-tag-list {
    margin: 15% 0 1px;
    height: 30px;
    overflow: hidden;
}

.card-tag-list>.tag {
    float: left;
    padding: 0 10px;
    border-radius: 1px;
    font-size: 24px;
    height: 30px;
    line-height: 30px;
    color: #999;
    background-color: #f2f2f7;
    margin-right: 5px;
}

.card-foot {
    margin-top: 5%;
}

.card-title {
    font-weight: bold;
}

.nut-card .nut-card__right .nut-card__right__title {
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    word-break: break-all;
    line-height: 1.5;
    font-size: 0.8rem;
    font-weight: bold;
}
</style>